<template>
  <div
    :style="tabbarStyle"
    @mouseenter="onMouseenter"
    @mouseleave="onMouseLeave"
    class="tabbar"
    ref="tabbar"
  >
    <div @click="SWITCH_LAUNCH_ACTIVE(true)" class="item">
      <svg-icon name="launch" />
    </div>
    <move-item
      v-for="item in tabbarItems"
      :data="item"
      :key="item.app_name"
      class="item"
    >
      <img
        v-show="item.app_name"
        @dragstart.prevent
        @mouseenter="onItemMouseenter(item)"
        @mouseleave="onItemMouseleave(item)"
        :src="item.imageUrl"
        alt=""
      />
      <span :style="itemNameStyle(item)" class="name">{{ item.app_name }}</span>
    </move-item>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import svgIcon from "./svgIcon.vue";
import MoveItem from "./moveItem.vue";
export default {
  components: { svgIcon, MoveItem },
  name: "tabbar",
  computed: {
    ...mapState([
      "tabbarItems",
      "tabbarActive",
      "launchActive",
      "activeIndex",
      "dragActive",
    ]),
    itemNameStyle() {
      return (item) => {
        if (item.hover) {
          return {
            display: "block",
          };
        } else {
          return {
            display: "none",
          };
        }
      };
    },
    tabbarStyle() {
      if (
        this.tabbarActive ||
        this.launchActive ||
        this.activeIndex === null ||
        this.dragActive
      ) {
        return {
          transform: "translateY(0)",
        };
      } else {
        return {};
      }
    },
  },
  methods: {
    ...mapMutations([
      "SWITCH_TABBAR_ACTIVE",
      "SWITCH_LAUNCH_ACTIVE",
      "SET_TABBAR",
    ]),
    onMouseenter() {
      this.SWITCH_TABBAR_ACTIVE(true);
    },
    onMouseLeave() {
      this.SWITCH_TABBAR_ACTIVE(false);
    },
    onItemMouseenter(item) {
      item.hover = true;
    },
    onItemMouseleave(item) {
      item.hover = false;
    },
  },
  mounted() {
    this.SET_TABBAR(this.$refs["tabbar"]);
  },
};
</script>

<style scoped>
.tabbar {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  padding: 0 18px;
  flex-direction: row;
  flex-shrink: 0;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  width: auto;
  position: fixed;
  bottom: 0;
  border-radius: 10px;
  border: transparent;
  box-shadow: 2px 7px 10px 0 rgba(0, 0, 0, 0.1),
    2px 11px 11px 0 rgba(0, 0, 0, 0.1), 2px 6px 8px 0 rgba(0, 0, 0, 0.08),
    2px 5px 8px 0 rgba(252, 22, 0, 0.05);
  background-color: rgba(247, 244, 244, 0.117);
  transform: translateY(70px);
  transition: transform 0.3s, width 0.2s;
  z-index: 9999;
}
/* .tabbar:hover {
  transform: translateY(0px);
} */
.tabbar .item {
  width: 64px;
  height: 64px;
  margin-left: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.tabbar .item .name {
  background-color: rgb(115, 109, 109);
  color: white;
  padding: 4px;
  border-radius: 4px;
  top: -48px;
  text-align: center;
  position: absolute;
  white-space: nowrap;
  display: none;
}
.tabbar .item .operate {
  background-color: rgba(115, 109, 109, 0.6);
  color: white;
  padding: 4px 20px;
  border-radius: 4px;
  /* text-align: center; */
  margin-top: -64px;
  display: flex;
  width: 150px;
  flex-direction: column;
}
.tabbar .item img {
  height: 100%;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(27 31 36 / 15%);
  user-select: none;
}
</style>